<template>
    <div v-if="message.prepared" class="w-72">
        <FileTree :folder="message.root" @openFile="loadFile"></FileTree>
    </div>
    <div v-else>
        <Button type="primary" block @click="loadFiles">点击打开文件夹</Button>
    </div>
</template>

<script lang="ts" setup>
import FileTree from './Tree/Tree.vue'
import { Button } from 'vant'
import { openDir, Folder } from '@@/FileControl/openDirectory';
import { useStore } from '@/store/Drawer'
import { reactive } from 'vue';

interface Data {
    root?: Folder
    prepared: boolean
}
const message = reactive({
    prepared: false
} as Data)
async function loadFiles() {
    const dir = await openDir({
        recursive: false
    })
    console.log(dir);
    message.root = reactive(dir)
    message.prepared = true
}
const loadFile = useStore().loadFile
</script>